<template>
    <div class="main">
        <div class="main-left">
            <div class="title">
            <p>{{fullCityName}}</p>

            <el-button type="text" @click="errorHandler">
                纠错及添加
            </el-button>
            </div>

            <div class="head">
                <p v-if="detailData.caurl">{{detailData.caname || ""}} &nbsp; 
                    <el-link type="primary" target="_blank" :href="detailData.caurl">
                        官方网站
                    </el-link>
                </p>

                <p>
                    {{detailData.title || ""}} &nbsp; 
                    <el-link v-if="detailData.website" type="primary" target="_blank" :href="detailData.website">
                        官方网站
                    </el-link>
                </p>
                <p>地址：{{detailData.address || ""}}</p>
                <p>联系电话：{{detailData.mobile || ""}}</p>
            </div>
        </div>
        


        <div class="text">
            <el-tabs v-model="currentTitleInd" @tab-click="handleClick">
                <el-tab-pane label="办事指南" name="0" v-if="detailData.guideinfo || detailData.guide">
                    <div v-if="detailData.guideinfo">
                        <div v-html="detailData.guideinfo.replace(/？/g,' ')"></div>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="通知公告" name="1" v-if="detailData.noticeinfo || detailData.notice">
                    <div v-if="detailData.noticeinfo">
                        <div class="notice richtext" v-html="detailData.noticeinfo.replace(/？/g,' ')"></div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>

        <div class="footer">
            <el-link type="primary" target="_blank" v-if=" currentTitleInd == 0 && detailData.guide" :href="detailData.guide">
                其他办事指南 <i class="iconfont">&#xe63e;</i>
            </el-link>
            <el-link type="primary" target="_blank" v-if=" currentTitleInd == 1 && detailData.notice" :href="detailData.notice">
                其他通知公告 <i class="iconfont">&#xe63e;</i>
            </el-link>
        </div>

        <el-dialog
            title=""
            :visible.sync="dialogVisible"
            width="40%"
            destroy-on-close
            :close-on-click-modal="false"
            append-to-body
        >   

            <template slot="title">
                <h3>纠错及添加</h3>
            </template>

            <div class="trading-content">
                <trading-form 
                    :types="['jyzx','jypt']"
                    @cancel="dialogVisible = false"
                ></trading-form>
            </div>
            
        </el-dialog>
    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

import tradingForm from './form.vue'

export default {
    components: { 
        tradingForm,
    },
    head: {},
    props: {
        code: {
            type: String,
            default: '',
        },
        fullCityName:{
            type: String,
            default: '',
        }
  
    },
    watch: {
        code:{
            handler:function(n,o){
                this.getDetail();
            },
            deep:true,
            immediate:true,
        }

    },
    data: () => ({
        detailData: {
            title: '',
            link: '',
            address: '',
            tel: '',
            bszn: '', //办事指南
            tzgz: '', //通知公告
        },
        currentTitleInd:'0',
        dialogVisible:false,
    }),
    computed: {
        ...mapGetters({
            getNickname: 'userinfo/getNickname'
        }),
    },
    methods: {
        getDetail() {
            const that = this;

            if (!this.code) {
                return;
            }

            this.$ajax({
                type: 'get',
                url: `${this.$store.state.api.tbUrl}/home/getcenterdetail.json`,
                data: {
                    code: that.code,
                },
                callback: function (data, res) {
                    that.detailData = data;
                },
                error: function () {},
            });
        },
        handleClick(val){
            // this.currentTitleInd = val.name;
        },
        errorHandler:function(){
            if (this.getNickname) {
                this.dialogVisible = true;
            } else {
                this.showLogin();
            }
        },
        ...mapActions({
            showLogin: 'global-dialog/showLogin',
        }),
    },
    mounted() {
        // this.getDetail();
    },
    beforeDestroy() {},
};
</script>

<style lang="scss">
.richtext{
    img{
        max-width: 960px;
        height: 100%;
    }
    // .df-box{
    //     height: auto !important;
    // }
}
</style>

<style lang="scss" scoped>
@import '@css/var.scss';
$pColor: #323233;
// .panel-c {
::v-deep {
    .panel-c {
        margin: 0 auto !important;
        text-align: center;
    }
    
    .df-box{
        height: auto !important;
    }

    
    ::v-deep {
        p {
            text-align: center !important;
        }
    }

}
// }
.main {
    width: 100%;
    .main-left{
        width: 520px;
    }

    // 图片
    .title{
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: $pColor;
        p{
            font-weight: bold;
        }
        // margin-bottom: 2px;
    }
    .head {
        p {
            color: $pColor;
            padding: 8px 0px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
    }
    .active {
        color: $primaryColor;
    }
    .text {
        .notice {
            min-height: 200px;
        }
    }
    .text-title {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .text-title div {
        cursor: pointer;
        text-align: center;
        width: 100px;
    }
    .text-title div:hover {
        color: $primaryColor;
    }
    .footer {
        margin-top: 20px;

        .el-link--inner {
            display: block;

            .iconfont {
                font-size: 14px;
            }
        }
    }
}
</style>
 